<template>
  <ElCard class="card art-custom-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="title">系统</span>
        <span class="subtitle">基本环境</span>
      </div>
    </template>
    <ElDescriptions :column="2" border>
      <ElDescriptionsItem label="服务器IP">{{ data?.computer_ip || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="服务器名称">{{ data?.computer_name || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="系统架构">{{ data?.os_arch || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="操作系统">{{ data?.os_name || '-' }}</ElDescriptionsItem>
      <ElDescriptionsItem label="项目路径">{{ data?.user_dir || '-' }}</ElDescriptionsItem>
    </ElDescriptions>
  </ElCard>
</template>

<script setup lang="ts">
import type { ServerMonitorModel } from '@/api/system/server'
defineProps<{ data: ServerMonitorModel['sys'] | null | undefined }>()
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.card-header .title {
  font-weight: 600;
}

.card-header .subtitle {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}
</style>